<template>
	<div class="login-page-wrap">
		<div class="login-page-header-wrap">
			<i class="icon-back" @click="back"></i>
			<div class="login-page-header">登录</div>
		</div>
		<div class="login-body-wrap">
			<div class="login-page-item-wrap">
				<div class="login-page-item border-1px fix">
					<i class="login-icon icon-user"></i>
					<input type="text" placeholder="手机号/用户名" class="login-input" v-model="loginForm.username">
				</div>
				<div class="login-page-item border-1px flex">
					<i class="login-icon icon-password"></i>
					<input :type="pwdType" placeholder="密码" class="login-input" v-model="loginForm.password" @keyup.enter="login" style="flex:1">
					<i class="login-icon" :class="[this.pwdType === 'text'? 'icon-password-see':'icon-password-nosee']" @click="showPwd"></i>
				</div>
				<div class="login-page-item" style="border:0 none;">
					<!-- <div class="error-msg" v-show="errorMsg" >{{errorMsg}}</div> -->
					<div id="captcha"></div>
				</div>
			</div>
			<div class="login-a-wrap flex" style="justify-content: space-between;">
				<router-link to="/forgetPassword">忘记密码?</router-link>
				<router-link to="/register">注册</router-link>
			</div>
			<div class="login-btn-wrap">
				<div class="login-btn" @click="login">登录</div>
			</div>
			<template>
				<div class="third-part-login-wrap" v-if="loginModeOp != 1 && (qq_login || wx_login)">
					<div class="third-part-header">第三方登录</div>
					<div class="third-part-inner-wrap">
						<a href="javascript:;" class="icon-qq" @click="loginqq" v-if="qq_login"></a>
						<a href="javascript:;" class="icon-weixin" @click="loginwx" v-if="wx_login"></a>
					</div>
				</div>
			</template>
		</div>
	</div>
</template>

<script>
	import {loginqq,loginwx} from '@/api/login'
	import {getPath,loadCookie} from '@/utils/auth'
	import { isWeixin } from '@/utils'
	import md5 from 'js-md5'
	import mixin from '@/mixins/removeLoading'
	import {getHallInfo} from '@/api/hall'
	export default{
		name:'login',
		metaInfo: {
		  title: '登录',
			meta: [{
		    name: 'keywords',
		    content: '1234tv.com、1234tv财经直播、财经直播平台、财经视频、财经直播系统、财经直播间、财经直播视频、财经直播教程'
		  },{
				name: 'description',
				content: '专注互联网财经视频直播服务，致力为金融行业从业者、投资者、财经院校师生提供专业、综合性互联网财经直播服务平台。'
			}],
		},
		mixins: [mixin],
		data(){
			return{
				pwdType: 'password',
				errorMsg: '',
				loginForm:{
					username: '',
					password: '',
					NECaptchaValidate: ''
				},
				loginModeOp: loadCookie('1234tv-login-mode-op'),
				isWeixin: isWeixin,
				is_official: typeof(window.is_official) !== 'undefined' ? !window.is_official : true,
				qq_login: true,
				wx_login: true
			}
		},
		methods:{
			showPwd(){
				if(this.pwdType === 'password'){
					this.pwdType = 'text'
				}else{
					this.pwdType = 'password'
				}
			},
			back(){
				this.$router.go(-1)
			},
			login(){
				if(this.loginForm.username === '' || this.loginForm.password === ''){
					this.errorMsg = '用户名，密码必须都填写!'
					this.$layer.open({
						content: '用户名，密码必须都填写!'
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					});
					return false
				}
				if(this.captchaIns && this.loginForm.NECaptchaValidate === ''){
					this.errorMsg = '请先验证!'
					this.$layer.open({
						content: '请先验证!'
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					});
					return false
				}
				let loadingIndex = this.$layer.open({type: 2});
				this.$store.dispatch('Login',{username:this.loginForm.username,password:md5(this.loginForm.password + process.env.VUE_APP_SALT),NECaptchaValidate:this.loginForm.NECaptchaValidate,v:2}).then(res=>{
					this.$layer.close(loadingIndex)
					let fromPath = getPath()
					if(fromPath){
						this.$router.push(fromPath)
					}else{
						this.$router.push('/')
					}
				}).catch(err=>{
					this.$layer.close(loadingIndex)
					if(err.data.login_faild && err.data.login_faild >= 3 || err.code === 1000002){
						if(this.captchaIns){
							this.captchaIns.refresh()
							this.loginForm.NECaptchaValidate = ''
						}else{
							this.initCaptcha()
						}
					}
				})
			},
			initCaptcha(){
				let that = this;
				initNECaptcha({
						element: '#captcha',
						captchaId: 'b280b14b93ba4e2c9cf3d25a922cd0ab',
						mode: 'float',
						onVerify: (err,res)=>{
							if(!err){
								this.loginForm.NECaptchaValidate = res.validate
								if(this.errorMsg === '请先验证!'){
									this.errorMsg = ''
								}
							}
						}
				}, function (instance) {
						// 初始化成功后得到验证实例instance，可以调用实例的方法
						that.captchaIns = instance
				}, function (err) {
						// 初始化失败后触发该函数，err对象描述当前错误信息
				})
			},
			loginqq(){
				let fromPath = getPath() || '/'
				loginqq({return_url:fromPath}).then(res=>{
					const {data:{url}} = res
					window.location.href = url
				})
			},
			loginwx(){
				let fromPath = getPath() || '/'
				loginwx({return_url:fromPath}).then(res=>{
					const {data:{url}} = res
					window.location.href = url
				}).catch(err=>{
					console.log(err)
				})
			}
		},
		created(){
			this.captchaIns = null
			if(window.is_official && window.eng_name){
				getHallInfo({eng_name:window.eng_name,is_official:!window.is_official}).then(res=>{
					if(res.data){
						this.qq_login = res.data.qq_login
						this.wx_login = res.data.wx_mp_login
					}
				}).catch(err=>{
					this.loading = true
					console.log(err)
				})
			}
		},
		beforeDestroy(){
			this.captchaIns = null
		}
	}
</script>

<style>
</style>
